<template>
  <div class="sideBar">
    <router-link to="/QuXianSD">
      <button class="button">湿度曲线图</button>
    </router-link>
    <router-link to="/QuXianGZ">
      <button class="button">光照曲线图</button>
    </router-link>

    <router-link to="/ZhuZhuangSD">
      <button class="button" >湿度柱状图</button>
    </router-link>
    <router-link to="/ZhuZhuangGQ">
      <button class="button" >光强柱状图</button>
    </router-link>

    <router-link to="/ExcelSD">
      <button class="button" >湿度列表</button>
    </router-link>
    <router-link to="/ExcelGQ">
      <button class="button" >光强列表</button>
    </router-link>
<!--    <router-link to="/mainContent/RollStudents">-->
<!--      <button class="button" style="width:100px">数据列表显示</button>-->
<!--    </router-link>-->
  </div>
</template>

<script>
export default {
  name: 'SideBar',
  mounted(){
    //使用axios发送ajax请求

  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.sideBar{
  width: 150px;
  height: 600px;
  background-color: #7cbbd9;
  float: left;
}
button{
  height: 40px;
  margin-top: 35px;
  font-size: 15px;
  font-family: 'Times New Roman', serif;
  background-color: #e4edee;
  border: 2px solid #d0e2d0;
  border-radius: 8px;
}
/* 悬停按钮 */
.button {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}
</style>
